<script>
import GoodsItem from "@/components/GoodsItem.vue"
import {getHomeDataApi} from "@/api/home"
import SearchInput from "@/components/SearchInput.vue"
import TarBar from "@/components/TarBar.vue"
import SafeBox from "@/components/SafeBox.vue"

export default {
  name: "Home",
  components: {
    SafeBox,
    TarBar,
    SearchInput,
    GoodsItem
  },
  async created() {
    const {
      data: {
        pageData: {
          items
        }
      }
    } = await getHomeDataApi()
    this.swipeList = items[1].data
    this.navList = items[3].data
    this.productList = items[6].data
    // console.log(items)
  },
  data() {
    return {
      swipeList: [],
      navList: [],
      productList: [],
    }
  },
  methods: {},
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: '智慧商城',
      path: '/pages/index/index'
    }
  },
  // 分享到朋友圈
  onShareTimeline() {
  },
}
</script>

<template>
  <div class="home" style="padding-bottom: 50px;">
    <view class="_header">
      <!-- 导航条 -->
      <van-nav-bar title="智慧商城"/>

      <SearchInput></SearchInput>
    </view>

    <swiper class="my-swiper" :indicator-dots="true" :autoplay="true" :interval="3000">
      <swiper-item v-for="item in swipeList" :key="item.imgUrl">
        <image :src="item.imgUrl" alt=""/>
      </swiper-item>
    </swiper>

    <!-- 导航 -->
    <van-grid column-num="5">
      <van-grid-item v-for="item in navList" :key="item.imgUrl" :icon="item.imgUrl" :text="item.text"
                     link-type="switchTab" url="/pages/Category/Category"/>
    </van-grid>

    <!-- 主会场 -->
    <div class="main">
      <image src="@/static/main.png" alt=""/>
    </div>

    <div class="guess">
      <p class="guess-title">—— 猜你喜欢 ——</p>

      <div class="goods-list">
        <GoodsItem v-for="item in productList" :key="item.goods_id" :item="item"></GoodsItem>
      </div>
    </div>

    <SafeBox></SafeBox>

    <TarBar tabbar-index="0"></TarBar>
  </div>
</template>

<style lang="less">
.home {
  background-color: #f6f6f6;

  ._header {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
  }

  // 分类导航部分
  .my-swiper {
    height: 185px;

    image {
      width: 100%;
      height: 185px;
    }
  }

  // 主会场
  .main image {
    display: block;
    width: 100%;
    height: 120px;
  }

  // 猜你喜欢
  .guess .guess-title {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
</style>
